<template>
  <!-- 页面主体区域 -->
  <el-container>
    <div class="head_box">
      <!-- 首页导航栏 -->
     
    </div>
    <div style="height: 100vh">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '55px' : '200px'" style="margin-left: -20px; height: 115%">
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened
          :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath"
          style="text-align: center;">
          <div style="color: rgb(220, 188, 7); margin-top: 20px;margin-bottom: 10px;">{{ isCollapse ? '系统' : '测试案例系统' }}</div>
          <div style="color: rgb(220, 188, 7);" class="toggle-button" @click="changeCollapse">{{ isCollapse ? '》' : '《' }}</div>
          <!-- 一级菜单 -->
          <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.pid">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.menu }}</span>
            </template>
          </el-menu-item>
          <el-submenu v-for="item in hasChildren" :key="item.pid" :index="item.pid" >
            <template slot="title">
              <span>{{ item.menu }}</span>
            </template>
              <el-menu-item v-for="child in item.children" :key="child.pid" :index="child.path" router>
                <template slot="title">
                  <!-- <i class="el-icon-location"></i> -->
                  <span>{{ child.menu }}</span>
                </template>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
    </div>
    <!-- 右侧内容主体 -->
    <el-main style="height: 100%;">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menulist: [
        {
          "pid": "1",
          "path": "/hello",
          "menu": "批量新增表单测试1"
        },
        {
          "pid": "2",
          "path": "/demo",
          "menu": "批量新增表单测试2"
        },
        {
          "pid": "3",
          "path": "/demo2",
          "menu": "大屏测试"
        },
        {
          "pid": "4",
          "path": "/wordDemo",
          "menu": "Word文件下载（后端)"
        },
        {
          "pid": "5",
          "path": "/wordDemo2",
          "menu": "Word文件下载（前端）"
        },
        {
          "pid": "6",
          "path": "/pdf",
          "menu": "导出为PDF"
        },
        {
          "pid": "7",
          "path": "/pdf2",
          "menu": "导出为PDF(工具类)"
        },
        {
          "pid": "8",
          "path": "/wordDemo3",
          "menu": "Word文件下载测试"
        },
      ],
      activePath: '',
      isCollapse: false
    }
  },
  methods: {
    // getRole() {
    //   if (sessionStorage.getItem('role') == "管理员用户") {
    //     this.menulist.push({
    //       "pid": "3",
    //       "path": "/userManage",
    //       "menu": "用户信息管理"
    //     },
    //       {
    //         "pid": "4",
    //         "path": "/consultManage",
    //         "menu": "疫情资讯管理"
    //       },

    //       {
    //         "pid": "5",
    //         "path": "/notificationManage",
    //         "menu": "疫情通知管理"
    //       },

    //       {
    //         "pid": "6",
    //         "path": "/knowledgeManage",
    //         "menu": "疫情知识管理"
    //       },

    //       {
    //         "pid": "8",
    //         "path": "/applicationManage",
    //         "menu": "审批申请管理"
    //       },

    //       {
    //         "pid": "9",
    //         // "path": "/clockManage",
    //         "menu": "健康信息管理",
    //         "children": [
    //           {
    //             "pid": "91",
    //             "path": "/clockManageToday",
    //             "menu": "当日健康信息"
    //           },
    //           {
    //             "pid": "92",
    //             "path": "/clockManageTotal",
    //             "menu": "健康信息汇总"
    //           }
    //         ]
    //       })
    //   }
    //   else if (sessionStorage.getItem('role') == "教师用户") {
    //     this.menulist.push({
    //       "pid": "8",
    //       "path": "/applicationManage",
    //       "menu": "请假审批管理"
    //     })
    //   }
    //   else {
    //     this.menulist.push(
    //       {
    //         "pid": "7",
    //         "path": "/application",
    //         "menu": "请假申请提交"
    //       },)
    //   }
    // },

    changeCollapse() {
      this.isCollapse = !this.isCollapse
    }
  },
  computed: {
    noChildren() {
      return this.menulist.filter(item => !item.children)
    },
    hasChildren() {
      console.log("file: PersonalCenter.vue:137  this.menulist.filter(item => !item.children)", this.menulist.filter(item => item.children))
      return this.menulist.filter(item => item.children)
    },
    // isCollapse() {
    //   return this.$store.state.tab.isCollapse
    // }
  },
  created() {
    // this.getRole()
  }
}
</script>

<style scoped>
.el-main {
  height: 100%;
}

.el-aside {
  height: 100%;
}

.el-menu {
  height: 100%;
}
</style>